<!-- Get the doingGoals and completedGoals from model has name "data" that contains those list of UserGoalDTO -->
<#include "/tags/goalItemTag.ftl"/>
<#macro goalprocess
        containerId="goal_info"
        choosenClass="chosen"
        goalClass="goal_list"
       	numberClass="listnumber"
       	goalNameClass="listname"
       	arrowClass="dropicon"
       	totalPeopleClass="sum"
       	progressBarClass="demo1"
       	showActionControl="yes">

	<div id="goal_info" style="margin-top: 20px;">
		<!--div class="chosen"> <a class="left btnDashboardSelectedL"></a> <a class="right"></a> </div-->
		<div class="goalProcessTab bgPos">
    		<a class="leftTab selected" href="#">MỤC TIÊU ĐANG THỰC HIỆN</a>
            <a class="rightTab" href="#">MỤC TIÊU ĐÃ HOÀN THÀNH</a>
        </div>
		<div id="doing">
		<#if data.doingGoals!?size == 0>
			<div class="clear"></div>
            <div class="NoGoal">
            	<span class="icon_1 iconNoGoal"></span>
                <p>
                	<#if data.username??>
                	Hiện tại ${data.username} <b>chưa xác định</b> bất cứ mục tiêu nào cho mình.
                	<#else>
                	Hiện tại bạn <b>chưa xác định</b> bất cứ mục tiêu nào cho mình.<br/> Hãy <b>nhập mục tiêu</b> và thực hiện nó nhé!
                	</#if>
                </p>
            </div>
		</#if>
		<div class="page">
		<#list data.doingGoals as item>		
			<@goalItem index=item_index+1 goalId=item.goalId title=item.title percent=item.percent 
					   entryCount=item.entryCount userCount=item.userCount showActionControl=showActionControl/>		    	
			<#if !item_has_next>
				<#assign lastItem=item/>
			</#if>
	    </#list>	    	 
	    	</div>
	    	<div id="doing_paging_loader" style="display: none; float: left; width: 100%; padding-top: 30px;">
		    	<center><img src="/images/loader.gif"/></center>
		    </div>  
	    	<#if lastItem??>
	    	<div class="paging_buttons">
	    		<a href="#" id="prev_doing" name="${lastItem.userId}" rel="-1" class="icon_1 down">
					
				</a>
				<a href="#" name="${lastItem.userId}" id="next_doing" rel="${lastItem.updateDate}" class="icon_1 up">
					
				</a>
	    	</div> 
	    	</#if>
	    </div>
	    <div id="done" style="display:none">
	    	<#if data.completedGoals!?size == 0>
	    		<div class="clear"></div>
            	<div class="NoGoal">
            		<span class="icon_1 iconNoGoal"></span>
               	 	<p>               	 	
                	<#if data.username??>
                	Hiện tại ${data.username} <b>chưa hoàn thành</b> bất cứ mục tiêu nào của mình.
                	<#else>
                	Hiện tại bạn <b>chưa hoàn thành</b> bất cứ mục tiêu nào của mình.<br/> Hãy <b>cập nhật thường xuyên</b> mục tiêu của bạn nhé!
                	</#if>
                	</p>
            	</div>
            </#if>   
            <div class="page">         
            <#list data.completedGoals as item>
            	<@goalItem index=item_index+1 goalId=item.goalId title=item.title percent=item.percent 
					   entryCount=item.entryCount userCount=item.userCount showActionControl=showActionControl
					   showFinishButton="no" />	
				<#if !item_has_next>
					<#assign lastItem=item/>
				</#if>
            </#list>
            </div>
            <div id="done_paging_loader" style="display: none; float: left; width: 100%; padding-top: 30px;">
		    	<center><img src="/images/loader.gif"/></center>
		    </div>  
	    	<#if lastItem??>
	    	<div class="paging_buttons">
	    		<a href="#" id="prev_doing" name="${lastItem.userId}" rel="-1" class="icon_1 down">
					
				</a>
				<a href="#" name="${lastItem.userId}" id="next_doing" rel="${lastItem.updateDate}" class="icon_1 up">
					
				</a>
	    	</div> 
	    	</#if>             
	    </div>	       	 
	    <div id="loader" style="display: none; float: left; width: 100%; padding-top: 30px;">
	    	<center><img src="/images/loader.gif"/></center>
	    </div> 
	</div>
	
	<div id="goal_list_placeholder" style="display:none;">
		<div class="goal_list">		  		
	  		<div class="listnumber">@[index]@</div>
	  		<div class="listGoal">
	  			<a class="listname" rel="@[goalId]@" href="/goal/view/@[goalId]@">@[title]@</a>		          	  		
	          	@[if_showActionControl;eq;yes]@
	          	<div class="dropicon">
	          		<a class="dropIcon" href="#" rel="@[goalId]@"></a>
                
	                <div class="goalSettingPopup" style="display:none" rel="@[goalId]@">
	                	<a class="closePopup bgPos"></a>
	                	<ul>
	                		@[if_status;eq;DOING]@ 
	                    	<li>&bull; <a href="${rc.contextPath}/done/edit/@[goalId]@" rel="@[goalId]@">Hoàn thành mục tiêu</a></li>                    	
	                        <li>&bull; <a class="deleteGoal" rel="@[goalId]@">Xóa mục tiêu</a></li>
	                        @[/if_status]@
	                        <li>&bull; <a rel="@[goalId]@;@[percent]@" href="${rc.contextPath}/manageSMARTGoal.html?goalId=@[goalId]@">Cập nhật tiến trình thực hiện</a></li>
	                        <li>&bull; <a href="${rc.contextPath}/entry/add/@[goalId]@" rel="@[goalId]@">Viết nhật ký thực hiện</a></li>
	                    </ul>
	                </div>	          	
                </div>
	          	@[/if_showActionControl]@
	          	@[if_entryCount;gt;0]@
	        	<div class="clearthis"></div>						  			
            	<p>Tổng số bài viết cho mục tiêu này: <b>@[entryCount]@</b></p>							  			
	  			@[/if_entryCount]@		  			
			</div>	          		                    
	        <div class="sum"><b>@[userCount]@</b> <@spring.message "macro.goalProcessTag.people"/></div>
	        <div class="score1">
	            <div class="scoredo" rel="@[goalId]@">HOÀN THÀNH <b>@[percent]@%</b></div>
	            <div class="scorebar" rel="@[goalId]@">
	            	@[if_percent;gt;0]@
	           		<div class="left"></div>
	            	@[percentPX]@
	            	<div class="right"></div>
	            	@[/if_percent]@
	        	</div>
	    	</div>
	    </div>
		<div class="w3"></div>
	</div>
 </#macro>